<%@ page contentType="text/html;charset=UTF-8" language="java"%>

<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
</head>

<body>

<form id="upForm" class="layui-form" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">请选择文档</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadGurus">
                <i class="layui-icon">&#xe67c;</i>上传文档
            </button>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addEms">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>




<button type="button" id="upBtn" class="layui-btn layui-btn-radius layui-btn-normal">文档上传</button>
<button type="button" id="downBtn" class="layui-btn layui-btn-radius layui-btn-warm">批量下载</button>
<table id="demo" layui-filter="test"></table>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

<script type="text/javascript">
    layui.use(["table","form","layer","upload"],function(){
        var table = layui.table;
        var layer = layui.layer;
        var upload = layui.upload;

        table.render({
            elem: "#demo"
            ,url: "${pageContext.request.contextPath}/guru/gurus"
            ,page: true
            ,limit: 3
            ,limits: [3,6,7,9]
            ,cols:[[
                {type: 'checkbox'}
                ,{field: 'guruId',title: 'ID'}
                ,{field: 'guruName',title:'上师名字'}
                ,{field: 'guruStatus',title:'上师状态'}
                ,{field: 'guruNickname',title:'上师法号'}
                ,{field: 'guruImage', title: '图片显示',templet:function(d){
                        return "<img src='${pageContext.request.contextPath}"+d.guruImage+"' height='100'/>";
                    }}
            ]]
        });

        //批量下载
        $("#downBtn").click(function(){
            var cs = table.checkStatus('demo');
            if(cs.data.length>0){
                layer.confirm('是否确认下载',function(index){
                    var params = "";
                    for(var i=0;i<cs.data.length;i++){
                        params+= "ids="+cs.data[i].guruId+"&";
                    }
                    params = params.substring(0,params.length-1);
                    alert(params);
                    $.ajax({
                        url:"${pageContext.request.contextPath}/guru/downGurus",
                        data:params,
                        dataType:"json",
                        success:function(data){
                            layer.msg("下载成功");
                            //table.reload("demo");
                        }
                    });
                    layer.close(index);
                })
            }else {
                layer.msg("请选中待下载数据");
            }
        });

        //对添加追加点击事件
        $("#upBtn").click(function(){
            layer.open({
                type:1,
                title:"上传文档",
                content:$("#upForm")
            })
        });

        upload.render({
            elem: '#uploadGurus' //绑定元素
            ,accept: "file"
            ,url: '${pageContext.request.contextPath}/guru/uploadGurus' //上传接口
            ,done: function(res){
                if(res==0)
                    table.reload();
            }
        });
    })
</script>
</body>

</html>